import React, { Component } from 'react';
import { Layout } from 'antd';

import './Index.css';

import TheSideBar from '../../components/TheSideBar';
import HomeRouter from '../../router/HomeRouter';
import TheBreadCrumb from '../../components/TheBreadCrumb';

const { Header, Content, Sider } = Layout;

export default class Index extends Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    const { collapsed } = this.state;
    return (
      <div>
        <Layout style={{ minHeight: '100vh' }} className="home-container">
          <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
            <div className="logo" />
            <TheSideBar></TheSideBar>
          </Sider>

          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }} />

            <Content style={{ margin: '0 16px' }}>
              <TheBreadCrumb></TheBreadCrumb>
              <div
                className="site-layout-background"
                style={{ padding: 24, minHeight: 360 }}
              >
                <HomeRouter></HomeRouter>
              </div>
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}
